<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./jquery-1.8.3.js"></script>
    <script src="./jquery.color-2.1.2.js"></script>

    <script>
        $(document).ready(function () {
            // jQuery 效果- 隐藏和显示
            // show
            $('#btn_hide').click(function () {
                $('#div_1').hide('slow');
            });
            // hide
            $('#btn_show').click(function () {
                $('#div_1').show('fast');
            });
            // toggle
            $('#btn_toggle').click(function () {
                $('#div_1').toggle(5000);
            });

            // jQuery 效果 - 滑动
            // slideDown
            $('#btn_slide_down').click(function () {
                $('#div_2').slideDown('slow');
            });
            // slideUp
            $('#btn_slide_up').click(function () {
                $('#div_2').slideUp('fast');
            });
            // slideToggle
            $('#btn_slide_toggle').click(function () {
                $('#div_2').slideToggle(5000);
            });

            // jQuery 效果 - 淡入淡出
            // fadeIn
            $('#btn_fade_in').click(function () {
                $('#div_3').fadeIn('slow');
            });
            // fadeOut
            $('#btn_fade_out').click(function () {
                $('#div_3').fadeOut('fast');
            });
            // fadeToggle
            $('#btn_fade_toggle').click(function () {
                $('#div_3').fadeToggle(5000);
            });
            // fadeTo
            $('#btn_fade_to').click(function () {
                var opacity = parseFloat($('#input_opacity').val());
                $('#div_3').fadeTo(5000, opacity);
            });

            // jQuery 效果- 动画
            // animate
            $('#div_4').mouseenter(function () {
                $('#div_4').animate({
                    center: '250px',
                    opacity: '0.5',
                    height: '250px',
                    width: '250px',
                    "font-size": "32px",
                    color: 'blue',
                    "background-color": 'orange',
                });
            });
            $('#div_4').mouseleave(function () {
                $('#div_4').animate({
                    opacity: '1',
                    height: '100px',
                    width: '100px',
                    "font-size": "24px",
                    color: 'red',
                    "background-color": 'blue',
                });
            });
        });
    </script>
</head>

<body>

    <h3>jQuery 效果- 隐藏和显示</h3>
    <h4>show hide toggle</h4>
    <div>
        <div id="div_1" style="background-color: blue; width: 300px; height: 120px;"></div>
        <button id="btn_hide">hide</button>
        <button id="btn_show">show</button>
        <button id="btn_toggle">toggle</button>
    </div>
    <hr>

    <h3>jQuery 效果 - 滑动</h3>
    <div>
        <div id="div_2" style="background-color: blue; width: 300px; height: 120px;"></div>
        <button id="btn_slide_down">slideDown</button>
        <button id="btn_slide_up">slideUp</button>
        <button id="btn_slide_toggle">slideToggle</button>
    </div>
    <hr>

    <h3>jQuery 效果 - 淡入淡出</h3>
    <div>
        <div id="div_3" style="background-color: blue; width: 300px; height: 120px;"></div>
        <button id="btn_fade_in">fadeIn</button>
        <button id="btn_fade_out">fadeOut</button>
        <button id="btn_fade_toggle">fadeToggle</button>
        <input id="input_opacity" type="range" min="0.0" max="1.0" step="0.1" value="0.8">
        <button id="btn_fade_to">fadeTo</button>
    </div>
    <hr>

    <h3>jQuery 效果- 动画</h3>
    <div>
        <div id="div_4" style="background-color: green; width: 300px; height: 230px;">
            hello, world.
        </div>
    </div>
    <hr>



</body>

</html>